<template>
	<view class="content">
		<!-- 搜索区域 -->
		<my-sreach></my-sreach>
		<view class="tabNav1"></view>
		<!-- 新闻头部区域 -->
		<scroll-view scroll-x="true" :show-scrollbar="false" class="top_news_scroll">
			<view v-for="(item, i) in newsList" :key="i"
				:class="['news_item', 'clearfix', i === active ? 'active' : '']" @click="activeTopNews(item, i)">
				{{ item.name }}
			</view>
		</scroll-view>
		<view class="tabNav2"></view>
		<!-- 新闻内容区域 -->
		<block v-if="newsContentList.length != 0">
			<view class="newsContentList" v-for="item in newsContentList" :key="item.id" @click="gotoNews(item)">
				<text>{{ item.title }}</text>
				<image v-if="item.picUrl" :src="item.picUrl" mode="scaleToFill" />
				<!-- 作者 时间区域  -->
				<view class="authorOrTime">
					<text>作者：{{ item.source }}</text>
					<text>{{ item.ctime }}</text>
				</view>
				<!-- 分享 评论 点赞 收藏 -->
				<view> </view>
			</view>
		</block>
		<text class="newsContentListText" v-else>接口使用次数完毕</text>
	</view>
</template>

<script>
	import mySreach from "../../components/my-sreach.vue";
	import {
		headLinesNews
	} from "../../api/requestApi/newsListApi";
	export default {
		components: {
			mySreach,
		},
		data() {
			return {
				title: "Hello",
				newsList: [{
						name: "头条",
						address: "https://apis.tianapi.com/topnews/index",
					},
					{
						name: "综合",
						address: "https://apis.tianapi.com/generalnews/index",
					},
					{
						name: "电竞新闻",
						address: "https://apis.tianapi.com/esports/index",
					},
					{
						name: "女性",
						address: "https://apis.tianapi.com/esports/index",
					},
					{
						name: "简报",
						address: "https://apis.tianapi.com/esports/index",
					},
					{
						name: "汽车新闻",
						address: "https://apis.tianapi.com/esports/index",
					},

				],
				newsAddress: "https://apis.tianapi.com/generalnews/index",
				active: 0,
				// 数据
				newsContentList: [],
				page: 3,
			};
		},
		onLoad() {
			headLinesNews(this.page, this.newsAddress)
				.then(({
					data: res
				}) => {
					if (res.code == 150) {
						console.error(res.msg)
					} else {
						this.newsContentList = res.result.newslist
					}
				})
				.catch((err) => {
					console.error(err);
				});
		},
		// 上拉触底事件
		onReachBottom(e) {
			this.page++;
			this.activeTopNews(this.page, this.newsAddress)
		},
		// 下拉刷新事件
		onPullDownRefresh() {
			this.page = 3;
			this.activeTopNews(this.page, this.newsAddress)
			uni.stopPullDownRefresh();
		},
		methods: {
			activeTopNews(item, i) {
				this.active = i;
				this.newsAddress = item.address;
				headLinesNews(this.page, item.address)
					.then(({
						data: res
					}) => {
						if (res.code == 150) {
							console.error(res.msg)
						} else {
							this.newsContentList = res.result.newslist
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
			// 前往url跳转
			gotoNews(item) {
				console.log(item, '一条新闻的内容')
				uni.navigateTo({
					url: '/pages/news/newsContext/index?item=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		},
	};
</script>

<style lang="less" scoped>
	.tabNav1 {
		width: 100%;
		height: 30px;
	}

	.tabNav2 {
		width: 100%;
		height: 25px;
	}

	.top_news_scroll {
		position: fixed;
		top: 40px;
		left: 0;
		width: 100%;
		height: 25px;
		white-space: nowrap;
		display: flex;
		background-color: rgba(255, 255, 255, 0.835);

		.news_item {
			display: inline-block;
			margin-right: 15px;
			text-align: center;
			font-size: 16px;
		}
	}

	.active {
		padding-bottom: 3px;
		border-bottom: 2px solid red;
		font-weight: bold;
		// color: red;
	}

	.newsContentList {
		clear: both;
		height: 20%;
		margin: 15px 0;
		font-size: 18px;

		image {
			width: 100%;
		}

		.authorOrTime {
			margin-top: 10px;
			color: rgb(152, 147, 147);
			font-size: 12px;
			display: flex;
			justify-content: space-between;
		}
	}

	.newsContentListText {
		margin-top: 30px;
	}
</style>
